import React, {
    useState,
    useEffect,
    useMemo,
    useCallback,
    useLayoutEffect
} from "react";
import { connect, useDispatch } from "react-redux";
import {
    LgPopLayer
} from "lancoo-web-ui";
import $ from "jquery";
import axiosMethod from "../../util/axios";
import "./index.scss";
import { message, Upload } from "antd";
import Scrollbars from "react-custom-scrollbars";


function SensitivePage(props){
    let {
        userInfo,
        skinInfo
    } = props;

    const dispatch = useDispatch();
    const [curWords, setcurWords] = useState({});
    const [editVisible, setEditVisible] = useState(false);
    const [wordList, setWordList] = useState([]);

    const getWordList = useCallback(()=>{
        axiosMethod({
            type: "get",
            url: "/api/sensitiveWord/list/manage",
            body: {
                eduId: userInfo.eduId
            },
            callback: function(res){
                if(Array.isArray(res)){
                    setWordList(res);
                } else {
                    setWordList([]);
                }
            }
        });
    }, [userInfo]);

    const editWordList = useCallback((data)=>{
        let arr = wordList.map((item)=>{
            let obj = {...item};
            if(item.id === data.id){
                obj = {...data};
            }
            return obj;
        })
        setWordList(arr);
    }, [wordList]);

    const editWordMethod = useCallback((key, value) => {
        let info = {...curWords};
        info[key] = value;
        setcurWords(info);
    }, [curWords]);

    const updateWord = useCallback(()=>{
        if(!curWords.word){
            message.warn("敏感词内容不能为空");
            return;
        }
        axiosMethod({
            type: "post",
            url: "/api/sensitiveWord/manage/save",
            body: {
                ...curWords,
                eduId: userInfo.eduId
            },
            callback: function(res, info){
                if(info.code === "200"){
                    if(curWords.id){
                        message.success("修改成功");
                        editWordList(curWords);
                    } else {
                        message.success("添加成功");
                        getWordList();
                    }
                    setEditVisible(false);
                }
            }
        });
    }, [userInfo, curWords, editWordList, getWordList]);

    const deleteWord = useCallback((data)=>{
        dispatch({
            type: "SET_ALERTINFO",
            data: {
                title: "是否删除该敏感词？",
                visible: true,
                onOk: function(){
                    axiosMethod({
                        type: "delete",
                        url: "/api/sensitiveWord/manage/delete/" + data.id,
                        body: {},
                        callback: function(res, info){
                            if(info.code === "200"){
                                message.success("删除成功");
                                getWordList();
                            }
                        }
                    });
                    dispatch({
                        type: "SET_ALERTINFO",
                        data: {
                            visible: false,
                            title: "",
                            smallTitle: "",
                            data: {},
                            onOk: ()=>{},
                            onCancel: ()=>{}
                        }
                    })
                },
                onCancel: function(){
                    dispatch({
                        type: "SET_ALERTINFO",
                        data: {
                            visible: false,
                            title: "",
                            smallTitle: "",
                            data: {},
                            onOk: ()=>{},
                            onCancel: ()=>{}
                        }
                    })
                }
            }
        })
        
    }, [dispatch, getWordList]);

    useEffect(()=>{
        getWordList();
        document.body.classList.add(`skin-${skinInfo.userSkin}`);
    }, [getWordList, skinInfo]);

    return (
        <div className={`sensitive-words-page`}>
            <div className="sensitive-words-info">
                <span className="words-info-num">
                    共<span>{wordList.length}</span>个敏感词
                    <span className="words-info-tip">
                        (tip:  双击敏感词可以进行编辑操作)
                    </span>
                </span>
                <div className="words-add-btn" onClick={()=>setEditVisible(true)}><i></i>添加敏感词</div>
            </div>
            <Scrollbars style={{
                height: "calc(100% - 50px)"
            }}>
            <div className="sensitive-words-list">
                {
                    wordList.map((item, index)=>(
                        <div className="sensitive-words-one" onDoubleClick={()=>{
                            setcurWords(item);
                            setEditVisible(true);
                        }} key={index}>
                            {item.word}
                            <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 17 17" onClick={()=>deleteWord(item)}>
                                <g id="组_5826" data-name="组 5826" transform="translate(-480 -453)">
                                    <g id="椭圆_8" data-name="椭圆 8" transform="translate(482 455)" fill="#e71616" stroke="#fff" stroke-linejoin="round" stroke-width="2">
                                    <circle cx="6.5" cy="6.5" r="6.5" stroke="none"/>
                                    <circle cx="6.5" cy="6.5" r="7.5" fill="none"/>
                                    </g>
                                    <rect id="圆角矩形_7" data-name="圆角矩形 7" width="7" height="1" rx="0.5" transform="translate(485 461)" fill="#fff"/>
                                </g>
                            </svg>
                        </div>
                    ))
                }
            </div>
            </Scrollbars>
            <LgPopLayer
                title="修改敏感词"
                isOpen={editVisible}
                className="edit-word-poplayer"
                height={200}
                onIconClose={() => {
                    setEditVisible(false);
                }}
                onClose={() => {
                    setEditVisible(false);
                }}
                onConfirm={updateWord}
            >
                <div className="edit-word-container">
                    <span className="word-name">敏感词内容:</span>
                    <input 
                    type="text" 
                    placeholder="请输入敏感词内容..." 
                    value={curWords.word} 
                    maxLength={8}
                    onChange={(e)=>editWordMethod("word", e.target.value)} />
                </div>
            </LgPopLayer>
        </div>
    )
}

const mapProps = (state) => {
    return {
        userInfo: state.userInfo,
        sysInfo: state.sysInfo,
        sysAddrInfo: state.sysAddrInfo,
        currentIdentity: state.currentIdentity,
        basePathName: state.basePathName,
        skinInfo: state.skinInfo
    }
}
export default connect(mapProps)(SensitivePage);